<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.box {
			width: 100px;
			height: 100px;
			background-color: red;
			-webkit-transition: 1s;  	/*兼容chrome低版本*/
			-moz-transition: 1s;  		/*兼容firefox低版本*/
			-o-transition: 1s;  		/*兼容opera低版本*/
			transition: 1s; 			/*IE9及以下不支持所有transition*/
		}
		/* JS中的写法
				WebkitTransition
				MozTransition
				OTransition
		 */

		.box:hover {
			width: 300px;
			height: 300px;
			background-color: blue;
		}

	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>